<template>
	<div id="theme">
		<BouncedDialog title="安装模板" :dialog-show.sync="dialogShow" width="50%" class="dialog">
			<el-form ref="themeForm" :model="themeForm" inline :rules="themeRules" label-width="70px">
				<el-form-item label="模板：" prop="theme">
					<el-input v-model="themeForm.theme" disabled />
				</el-form-item>
				<el-form-item label="站点：" prop="website_id">
					<el-select
						v-model="themeForm.website_id"
						placeholder="请选择"
						style="width: 100%"
						@change="handleChange"
					>
						<el-option
							v-for="item in options"
							:key="item.id"
							:label="item.domain"
							:value="item.id"
						/>
					</el-select>
				</el-form-item>
				<div class="btn">
					<el-button @click="dialogShow = false">取 消</el-button>
					<el-button type="primary" @click="submittheme()">确 定</el-button>
				</div>
			</el-form>
		</BouncedDialog>
		<el-radio-group v-model="lang" size="medium" @change="changeLang">
			<el-radio-button v-for="item in langList" :key="item.id" :label="item.lang">{{
				item.lang
			}}</el-radio-button>
		</el-radio-group>
		<el-table
			:data="themeList"
			:header-cell-style="{ 'text-align': 'center' }"
			:cell-style="{ 'text-align': 'center' }"
			style="width: 100%"
		>
			<el-table-column label="模板" prop="theme" />
			<el-table-column label="模板名称" prop="name" />
			<el-table-column label="作者" prop="author" />
			<el-table-column label="语言" prop="lang" />
			<el-table-column label="模板描述" prop="description" />
			<el-table-column label="操作" width="300px" fixed="right">
				<template slot-scope="scope">
					<el-button type="allfiles" size="mini" @click="allFiles(scope.row)">所有文件</el-button>
					<el-button type="theme" size="mini" @click="temFiles(scope.row)">模板文件</el-button>
					<el-button class="edit" size="mini" @click="update(scope.row)">更新</el-button>
					<el-button
						:type="scope.row.is_active == 1 ? 'disabled' : 'enable'"
						:disabled="scope.row.is_active == 1 ? 'disabled' : false"
						size="mini"
						@click="enable(scope.row)"
						>启用</el-button
					>
					<el-button type="uninstall" size="mini" @click="uninstall(scope.row)">卸载</el-button>
					<el-button class="edit" size="mini" @click="viewDesign(scope.row)">可视化设计</el-button>
				</template>
			</el-table-column>
		</el-table>
	</div>
</template>
<script>
import mouldApi from '@/api/theme.js'
import websettingApi from '@/api/websetting'
import mould from '@/api/theme.js'
export default {
	data() {
		return {
			themeList: [],
			dialogShow: false,
			options: [],
			themeForm: {
				website_id: '',
			},
			themeRules: {
				website_id: [{ required: 'true', message: '请选择站点', trigger: 'blur' }],
			},
			searchForm: {},
			siteId: '',
			langList: [],
			lang: '',
		}
	},
	computed: {
		siteId1() {
			return this.$store.getters.siteId
		},
	},
	watch: {
		siteId1(val, value) {
			this.siteId = val

			this.getLang()
		},
	},
	created() {
		this.siteId = this.$store.getters.siteId
		// this.themeForm.website_id = this.$store.getters.siteId
		if (this.siteId) {
			this.getLang()
		}
	},
	methods: {
		viewDesign() {
			const url = '/design/index?website_id=' + this.siteId + '&lang=' + this.lang
			window.open(url)
		},
		// 获取语言
		getLang() {
			websettingApi.langInfo({ site_id: this.siteId }).then((res) => {
				this.langList = res.data

				if (res.data.length > 0) {
					this.lang = res.data[0].lang
				}
				this.getList()
			})
		},
		// 切换语言
		changeLang(val) {
			this.lang = val
			this.getList()
		},
		// 已安装模板
		getList() {
			mouldApi.installList({ website_id: this.siteId, lang: this.lang }).then((res) => {
				this.themeList = res.data
			})
		},
		// 启用
		enable(row) {
			this.$confirm('是否启用该模板', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning',
			})
				.then(() => {
					const val = {
						theme_id: row.id,
						website_id: this.siteId,
						lang: row.lang,
					}
					mouldApi.themeActive(val).then((res) => {
						if (res.code == 0) {
							this.$message.success(res.msg)
							this.getList()
						} else {
							this.$message.error(res.msg)
						}
					})
				})
				.catch(() => {
					this.$message({ type: 'info', message: '已取消启用' })
				})
		},
		// 更新
		update(row) {
			this.$confirm('是否更新该模板', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning',
			})
				.then(() => {
					const val = {
						theme_id: row.id,
						website_id: this.siteId,
						theme: row.theme,
					}
					mouldApi.themeUpdate(val).then((res) => {
						if (res.code == 0) {
							this.$message.success(res.msg)
							this.getList()
						} else {
							this.$message.error(res.msg)
						}
					})
				})
				.catch(() => {
					this.$message({ type: 'info', message: '已取消更新' })
				})
		},
		// 卸载
		uninstall(row) {
			this.$confirm('是否卸载该模板', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning',
			})
				.then(() => {
					const val = {
						theme_id: row.id,
						website_id: this.siteId,
						//   theme: row.theme
					}
					mouldApi.themeUninstall(val).then((res) => {
						if (res.code == 0) {
							this.$message.success(res.msg)
							this.getList()
						} else {
							this.$message.error(res.msg)
						}
					})
				})
				.catch(() => {
					this.$message({ type: 'info', message: '已取消卸载' })
				})
		},
		// 所有文件
		allFiles(row) {
			//   const val = {
			//     theme_id: row.id,
			//     website_id: this.searchForm.website_id
			//   }
			//   mouldApi.allFiles(val).then(res => {

			//   })
			this.$router.push({ name: 'files', query: { id: row.website_id, lang: row.lang } })
		},
		// 模板文件
		temFiles(row) {
			// const val = {
			//   theme_id: row.id,
			//   website_id: this.searchForm.website_id,
			//   theme: row.theme
			// }
			// mouldApi.tmpFile(val).then(res => {

			// })

			this.$router.push({
				name: 'tempFiles',
				query: { id: row.website_id, tid: row.id, tname: row.theme, lang: row.lang },
			})
		},
		submittheme() {
			mouldApi.saveTheme({ ...this.themeForm }).then((res) => {
				if (res.code == 0) {
					this.$message.success(res.msg)
					this.dialogShow = false
				} else {
					this.$message.error(res.msg)
				}
			})
		},
		// // 获取站点列表
		// getWeblist() {
		//   websiteApi.websiteList().then(res => {
		//     this.options = res.data
		//     this.searchForm.website_id = res.data[0].id
		//     this.getList()
		//   })
		// },
		handleChange(val) {
			this.themeForm.website_id = val
		},
		handleClick(tab, event) {},
	},
}
</script>
<style lang="scss">
#theme {
	.el-radio-group {
		margin-bottom: 15px;
		margin-left: 15px;
		.el-radio-button {
			margin-right: 13px;
		}
		.el-radio-button__orig-radio:checked + .el-radio-button__inner {
			background-color: #fa8828;
			border-color: #fa8828;
			color: #fff;
		}
		.el-radio-button__inner {
			border-radius: 30px;
			border-left: solid 1px #dcdfe6;
			color: #555;
			font-size: 14px;
			padding: 0;
			width: 80px;
			height: 30px;
			line-height: 30px;
			text-align: center;
			box-shadow: none;
		}
		.el-radio-button--medium .el-radio-button__inner {
			width: 90px;
			height: 36px;
			line-height: 36px;
		}
	}
	.el-form-item__content {
		width: 320px;
	}
	.el-button--allfiles {
		background: #6f6f95;
		border-color: #edeef3;
		color: #fff;
		border-radius: 16px;
	}
	.el-button--uninstall {
		background: #ddd;
		border-color: #edeef3;
		color: #000;
		border-radius: 16px;
	}
	.el-button--theme {
		background-color: #f9b633;
		border-color: #edeef3;
		color: #fff;
	}
	.el-button--enable {
		background: #fe872b;
		border-color: #edeef3;
		color: #fff;
		border-radius: 16px;
	}
	.el-button--disabled {
		background-color: #eee;
		border-color: #eee;
		color: #aaa;
		border-radius: 16px;
	}
}
</style>
<style lang="scss" scoped>
.content {
	background-color: #fff;
	padding: 20px;
}
</style>
